<template>
	<div class="cost-wrap">
		<div class="module-box pb30">
			<div class="flex-between el-form-sub-title font-bold">用户概况</div>
			<div class="mb20 flex-between">
				<div>
					<span class="mr10">时间筛选</span>
					<el-date-picker
						v-model="dateRangeValue"
						type="daterange"
						unlink-panels
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						:disabled-date="disabledDate"
						format="YYYY-MM-DD"
						:shortcuts="shortcuts"
						@change="handleDateChange"
					/>
				</div>
				<el-button type="primary" plain @click="onExport" v-auth="'data:user:overview:analysis:export'">导出数据</el-button>
			</div>
			<div v-loading="loading">
				<div class="grid mt20">
					<el-card shadow="never" class="grid-item-2 mr20">
						<template #header>累计用户</template>
						<div class="grid">
							<div class="grid-item-3 mr20">
								<div class="sub-title">
									累计用户数<el-tooltip class="box-item" effect="light" content="截止筛选时间内，小程序注册的全部用户数" placement="top">
										<el-icon color="#888" class="mt-3 ml5" style="vertical-align: middle">
											<QuestionFilled />
										</el-icon>
									</el-tooltip>
								</div>
								<div class="font20 mt10 mb5">{{ data.userAll }}</div>
								<div :class="getColor(data.userAllRate)">{{ data.userAllRate }}</div>
							</div>
							<div class="grid-item-3 mr20">
								<div class="sub-title">
									累计微信用户数<el-tooltip class="box-item" effect="light" content="截止筛选时间内，微信小程序注册的全部用户数" placement="top">
										<el-icon color="#888" class="mt-3 ml5" style="vertical-align: middle">
											<QuestionFilled />
										</el-icon>
									</el-tooltip>
								</div>
								<div class="font20 mt10 mb5">{{ data.userWechat }}</div>
								<div :class="getColor(data.userWechatRate)">{{ data.userWechatRate }}</div>
							</div>
							<div class="grid-item-3">
								<div class="sub-title">
									累计支付宝用户数<el-tooltip class="box-item" effect="light" content="截止筛选时间内，支付宝小程序注册的全部用户数" placement="top">
										<el-icon color="#888" class="mt-3 ml5" style="vertical-align: middle">
											<QuestionFilled />
										</el-icon>
									</el-tooltip>
								</div>
								<div class="font20 mt10 mb5">{{ data.userAlipay }}</div>
								<div :class="getColor(data.userAlipayRate)">{{ data.userAlipayRate }}</div>
							</div>
						</div>
					</el-card>
					<el-card shadow="never" class="grid-item-2">
						<template #header>新增用户</template>
						<div class="grid">
							<div class="grid-item-3 mr20">
								<div class="sub-title">
									新增用户数<el-tooltip class="box-item" effect="light" content="筛选时间内，小程序注册的用户数" placement="top">
										<el-icon color="#888" class="mt-3 ml5" style="vertical-align: middle">
											<QuestionFilled />
										</el-icon>
									</el-tooltip>
								</div>
								<div class="font20 mt10 mb5">{{ data.userAllNew }}</div>
								<div :class="getColor(data.userAllNewRate)">{{ data.userAllNewRate }}</div>
							</div>
							<div class="grid-item-3">
								<div class="sub-title">
									新增微信用户数<el-tooltip class="box-item" effect="light" content="筛选时间内，微信小程序注册的用户数" placement="top">
										<el-icon color="#888" class="mt-3 ml5" style="vertical-align: middle">
											<QuestionFilled />
										</el-icon>
									</el-tooltip>
								</div>
								<div class="font20 mt10 mb5">{{ data.userWechatNew }}</div>
								<div :class="getColor(data.userWechatNewRate)">{{ data.userWechatNewRate }}</div>
							</div>
							<div class="grid-item-3 mr20">
								<div class="sub-title">
									新增支付宝用户数<el-tooltip class="box-item" effect="light" content="筛选时间内，支付宝小程序注册的用户数" placement="top">
										<el-icon color="#888" class="mt-3 ml5" style="vertical-align: middle">
											<QuestionFilled />
										</el-icon>
									</el-tooltip>
								</div>
								<div class="font20 mt10 mb5">{{ data.userAlipayNew }}</div>
								<div :class="getColor(data.userAlipayNewRate)">{{ data.userAlipayNewRate }}</div>
							</div>
						</div>
					</el-card>
				</div>
				<div class="grid mt20">
					<el-card shadow="never" class="grid-item-2 mr20">
						<template #header>累计支付用户</template>
						<div class="grid">
							<div class="grid-item-3 mr20">
								<div class="sub-title">
									累计支付用户数<el-tooltip class="box-item" effect="light" content="截止筛选时间内，支付的全部用户数" placement="top">
										<el-icon color="#888" class="mt-3 ml5" style="vertical-align: middle">
											<QuestionFilled />
										</el-icon>
									</el-tooltip>
								</div>
								<div class="font20 mt10 mb5">{{ data.userAllPay }}</div>
								<div :class="getColor(data.userAllPayRate)">{{ data.userAllPayRate }}</div>
							</div>
							<div class="grid-item-3 mr20">
								<div class="sub-title">
									累计微信支付用户数<el-tooltip class="box-item" effect="light" content="截止筛选时间内，微信小程序支付的全部用户数" placement="top">
										<el-icon color="#888" class="mt-3 ml5" style="vertical-align: middle">
											<QuestionFilled />
										</el-icon>
									</el-tooltip>
								</div>
								<div class="font20 mt10 mb5">{{ data.userWechatPay }}</div>
								<div :class="getColor(data.userWechatPayRate)">{{ data.userWechatPayRate }}</div>
							</div>
							<div class="grid-item-3">
								<div class="sub-title">
									累计支付宝支付用户数<el-tooltip
										class="box-item"
										effect="light"
										content="截止筛选时间内，支付宝小程序支付的全部用户数"
										placement="top"
									>
										<el-icon color="#888" class="mt-3 ml5" style="vertical-align: middle">
											<QuestionFilled />
										</el-icon>
									</el-tooltip>
								</div>
								<div class="font20 mt10 mb5">{{ data.userAlipayPay }}</div>
								<div :class="getColor(data.userAlipayPayRate)">{{ data.userAlipayPayRate }}</div>
							</div>
						</div>
					</el-card>
					<el-card shadow="never" class="grid-item-2">
						<template #header>新增支付用户</template>
						<div class="grid">
							<div class="grid-item-3 mr20">
								<div class="sub-title">
									新增支付用户数<el-tooltip class="box-item" effect="light" content="筛选时间内，支付的用户数量" placement="top">
										<el-icon color="#888" class="mt-3 ml5" style="vertical-align: middle">
											<QuestionFilled />
										</el-icon>
									</el-tooltip>
								</div>
								<div class="font20 mt10 mb5">{{ data.userAllPayNew }}</div>
								<div :class="getColor(data.userAllPayNewRate)">{{ data.userAllPayNewRate }}</div>
							</div>
							<div class="grid-item-3">
								<div class="sub-title">
									新增微信支付用户数<el-tooltip class="box-item" effect="light" content="筛选时间内，微信小程序支付的用户数量" placement="top">
										<el-icon color="#888" class="mt-3 ml5" style="vertical-align: middle">
											<QuestionFilled />
										</el-icon>
									</el-tooltip>
								</div>
								<div class="font20 mt10 mb5">{{ data.userWechatPayNew }}</div>
								<div :class="getColor(data.userWechatPayNewRate)">{{ data.userWechatPayNewRate }}</div>
							</div>
							<div class="grid-item-3 mr20">
								<div class="sub-title">
									新增支付宝支付用户数<el-tooltip class="box-item" effect="light" content="筛选时间内，支付宝小程序支付的用户数量" placement="top">
										<el-icon color="#888" class="mt-3 ml5" style="vertical-align: middle">
											<QuestionFilled />
										</el-icon>
									</el-tooltip>
								</div>
								<div class="font20 mt10 mb5">{{ data.userAlipayPayNew }}</div>
								<div :class="getColor(data.userAlipayPayNewRate)">{{ data.userAlipayPayNewRate }}</div>
							</div>
						</div>
					</el-card>
				</div>
				<div class="grid mt20">
					<el-card shadow="never" class="grid-item-2 mr20">
						<template #header>累计支付用户</template>
						<div class="grid">
							<div class="grid-item-3 mr20">
								<div class="sub-title">
									累计经销商用户支付数<el-tooltip class="box-item" effect="light" content="截止筛选时间内，支付的全部经销商用户数90" placement="top">
										<el-icon color="#888" class="mt-3 ml5" style="vertical-align: middle">
											<QuestionFilled />
										</el-icon>
									</el-tooltip>
								</div>
								<div class="font20 mt10 mb5">{{ data.userDealerPay }}</div>
								<div :class="getColor(data.userDealerPayRate)">{{ data.userDealerPayRate }}</div>
							</div>
							<div class="grid-item-3 mr20">
								<div class="sub-title">
									累计个人用户支付数<el-tooltip class="box-item" effect="light" content="截止筛选时间内，支付的全部个人用户数" placement="top">
										<el-icon color="#888" class="mt-3 ml5" style="vertical-align: middle">
											<QuestionFilled />
										</el-icon>
									</el-tooltip>
								</div>
								<div class="font20 mt10 mb5">{{ data.userPay }}</div>
								<div :class="getColor(data.userPayRate)">{{ data.userPayRate }}</div>
							</div>
						</div>
					</el-card>
					<el-card shadow="never" class="grid-item-2">
						<template #header>新增支付用户</template>
						<div class="grid">
							<div class="grid-item-3 mr20">
								<div class="sub-title">
									新增经销商用户支付数<el-tooltip class="box-item" effect="light" content="筛选时间内，经销商用户支付数" placement="top">
										<el-icon color="#888" class="mt-3 ml5" style="vertical-align: middle">
											<QuestionFilled />
										</el-icon>
									</el-tooltip>
								</div>
								<div class="font20 mt10 mb5">{{ data.userDealerPayNew }}</div>
								<div :class="getColor(data.userDealerPayNewRate)">{{ data.userDealerPayNewRate }}</div>
							</div>
							<div class="grid-item-3">
								<div class="sub-title">
									新增个人用户支付数<el-tooltip class="box-item" effect="light" content="筛选时间内，个人用户支付数" placement="top">
										<el-icon color="#888" class="mt-3 ml5" style="vertical-align: middle">
											<QuestionFilled />
										</el-icon>
									</el-tooltip>
								</div>
								<div class="font20 mt10 mb5">{{ data.userPayNew }}</div>
								<div :class="getColor(data.userPayNewRate)">{{ data.userPayNewRate }}</div>
							</div>
						</div>
					</el-card>
				</div>
			</div>
		</div>

		<div class="module-box pb30 mt20">
			<div class="el-form-sub-title font-bold">用户趋势</div>
			<div class="chart-wrap" v-loading="loading">
				<LineCharts :option="chartsData" />
			</div>
		</div>
		<div class="module-box pb30 mt20">
			<div class="el-form-sub-title font-bold">用户支付分析</div>
			<ProTable ref="proTable" :columns="columns" :request-api="getTableList" :init-param="initParam" :pagination="false">
				<template #expand="scope">
					{{ scope.row }}
				</template>
			</ProTable>
		</div>
	</div>
</template>

<script setup lang="tsx" name="dataCost">
import { onMounted, ref, reactive, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import dayjs from 'dayjs';
import { NextLoading } from '/@/utils/loading';
import { fetchDataUserData, fetchUserDataExport, fetchDataUserDataRate } from '/@/api/data';
import { useDownload } from '/@/hooks/useDownload';
import LineCharts from '/@/components/chart/lineCharts.vue';
import { fenToYuan } from '/@/utils/commonFunction';
import ProTable from '/@/components/ProTable/index.vue';
import { ProTableInstance, ColumnProps } from '/@/components/ProTable/interface';

const router = useRouter();
const route = useRoute();

const dateRangeValue = ref([dayjs().subtract(30, 'day').format('YYYY-MM-DD'), dayjs().subtract(1, 'day').format('YYYY-MM-DD')]);
const loading = ref(true);
const data = ref({
	userAll: 0,
	userAllRate: '--',
	userWechat: '--',
	userWechatRate: '--',
	userAlipay: '--',
	userAlipayRate: '--',
	userAllNew: '--',
	userAllNewRate: '--',
	userWechatNew: '--',
	userWechatNewRate: '--',
	userAlipayNew: '--',
	userAlipayNewRate: '--',
	userAllPay: '--',
	userAllPayRate: '--',
	userWechatPay: '--',
	userWechatPayRate: '--',
	userAlipayPay: '--',
	userAlipayPayRate: '--',
	userAllPayNew: '--',
	userAllPayNewRate: '--',
	userWechatPayNew: '--',
	userWechatPayNewRate: '--',
	userAlipayPayNew: '--',
	userAlipayPayNewRate: '--',
	userPay: '--',
	userPayRate: '--',
	userDealerPay: '--',
	userDealerPayRate: '--',
	userPayNew: '--',
	userPayNewRate: '--',
	userDealerPayNew: '--',
	userDealerPayNewRate: '--',
});
const chartsData = reactive<any>({
	data: [],
	xData: [],
	legend: [
		{ name: '新增用户数', code: 'userAllNew' },
		{ name: '新增微信用户数', code: 'userWechatNew' },
		{ name: '新增支付宝用户数', code: 'userAlipayNew' },
		{ name: '新增支付用户数', code: 'userAlipayNew' },
		{ name: '新增微信支付用户数', code: 'userWechatPayNew' },
		{ name: '新增支付宝支付用户数', code: 'userAlipayPayNew' },
		{ name: '新增经销商用户支付数', code: 'userDealerPayNew' },
		{ name: '新增个人用户支付数', code: 'userPayNew' },
	],
});

const shortcuts = [
	{
		text: '昨天',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24);
			end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
			return [start, end];
		},
	},
	{
		text: '近7天',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
			return [start, end];
		},
	},
	{
		text: '近30天',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
			return [start, end];
		},
	},
];

const disabledDate = (time: Date) => {
	return time.getTime() > Date.now();
};

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	paramCode: 'materialCode',
});

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getTableList"
const getTableList = (params: any) => {
	let data = {
		startTime: dayjs(dateRangeValue.value[0]).format('YYYY-MM-DD'),
		endTime: dayjs(dateRangeValue.value[1]).format('YYYY-MM-DD'),
	};

	return fetchDataUserDataRate(data);
};

// 表格配置项
const columns: ColumnProps<any>[] = [
	{
		prop: 'userTypeName',
		label: '客户类型',
		minWidth: 120,
	},
	{
		prop: 'userNums',
		label: '客户数',
		minWidth: 160,
	},
	{
		prop: 'userRate',
		label: '客户数占比',
		minWidth: 120,
	},
	{
		prop: 'orderAmount',
		label: '客单价',
		minWidth: 120,
	},
];

const handleDateChange = (val: any) => {
	getChartdata();
	proTable.value?.getTableList();
};

const getChartdata = async () => {
	loading.value = true;
	const params = {
		startTime: dayjs(dateRangeValue.value[0]).format('YYYY-MM-DD'),
		endTime: dayjs(dateRangeValue.value[1]).format('YYYY-MM-DD'),
	};
	chartsData.xData = [];
	chartsData.data = [];
	const res: any = await fetchDataUserData(params);
	data.value = res.data.data;
	chartsData.legend.map((i: any, index: number) => {
		const arr: any = [];
		res.data.chartsData.forEach((item: any) => {
			if (index == 0) {
				chartsData.xData.push(item.reportDate);
			}
			arr.push(item[i.code]);
		});
		chartsData.data.push(arr);
	});
	loading.value = false;
};

// 保存并导出
const onExport = () => {
	let data: any = {
		startTime: dayjs(dateRangeValue.value[0]).format('YYYY-MM-DD'),
		endTime: dayjs(dateRangeValue.value[1]).format('YYYY-MM-DD'),
	};
	ElMessageBox.confirm('确认导出数据?', '温馨提示', { type: 'warning' }).then(() => useDownload(fetchUserDataExport, '用户分析报表', data));
};

const getColor = (str: string) => {
	const classStr = str ? (str == '增长0.00%' ? '' : str.includes('增长') ? 'grow-red' : str.includes('下降') ? 'grow—green' : '') : '';
	return classStr;
};

// 页面加载时
onMounted(() => {
	NextLoading.done();
	getChartdata();
});
</script>

<style lang="scss">
.cost-wrap {
	.module-box {
		background: var(--el-color-white);
		padding: 20px;
		border-radius: var(--el-border-radius-round);
		box-sizing: border-box;
		.time {
			background: #f2f5f8;
			height: 32px;
			line-height: 32px;
			border-radius: 18px;
			font-size: 14px;
			font-weight: 400;
			padding: 0 16px;
			color: rgba($color: #000000, $alpha: 0.7);
			flex-shrink: 0;
		}
		.table-main {
			padding: 0;
		}
	}
	.sub-title {
		color: #666;
	}
	.grid {
		display: flex;
	}
	.grid-item-2 {
		width: 50%;
	}
	.grid-item-3 {
		width: 33%;
	}
	.chart-wrap {
		height: 300px;
		width: 100%;
	}
}
</style>
